<form id="<?php echo $uniqid;?>" method="post" style="">
    <el-container>
        <el-header style="height: 40px;" v-if="is_edit">设置商品规格</el-header>
        <el-header style="height: 40px;" v-else>第2步：选择商品规格</el-header>
        <el-container>
            <el-main style="padding: 0;">
                <div class="select-goods-info">
                    <img :src="goods_info.image">
                    <p>{{goods_info.title}}</p>
                </div>
                <div class="goods_sku_info">
                    <table class="datagrid-htable" border="0" cellspacing="0" cellpadding="0"
                           style="width: 100%;border: #ccc 0 solid;border-collapse:collapse;">
                        <thead>
                        <tr class="datagrid-header-row" style="background-color: #f9f9f9">
                            <th style="width: 34%;"><div>规格</div></th>
                            <th style="width: 5%;"><div>库存</div></th>
                            <th style="width: 7%;"><div>价格</div></th>
                            <th style="width: 8%;"><div id="th_score_sales"><i class="el-icon-info"></i>销量</div></th>
                            <th style="width: 10%;">
                                <div id="th_score_stock"><i class="el-icon-info"></i>活动库存</div>
                                <el-popover placement="top" popper-class="batch_score_popover" width="160" trigger="click" title="批量设置活动库存" v-model="batch_score_stock_visible">
                                    <el-input-number value="0" name="batch_score_stock" size="mini" controls-position="right" :min="0" style="max-width: 130px"></el-input-number>
                                    <div style="text-align: right; margin: 10px 0 0 0;">
                                        <el-button size="mini" type="text" @click="batch_score_stock_visible = false">取消</el-button>
                                        <el-button type="primary" size="mini" @click="batchScoreSubmit('score_stock', $event)">确定</el-button>
                                    </div>
                                    <i class="el-icon-edit-outline" style="color: #0442e0; font-size: 1.1em; cursor: pointer;" slot="reference">批量</i>
                                </el-popover>
                            </th>
                            <th style="width: 10%;">
                                <div id="th_score_score"><i class="el-icon-info"></i>兑换积分</div>
                                <el-popover placement="top" popper-class="batch_score_popover" width="160" trigger="click" title="批量设置兑换积分" v-model="batch_score_score_visible">
                                    <el-input-number value="0" name="batch_score_score" size="mini" controls-position="right" :min="0" style="max-width: 130px"></el-input-number>
                                    <div style="text-align: right; margin: 10px 0 0 0;">
                                        <el-button size="mini" type="text" @click="batch_score_score_visible = false">取消</el-button>
                                        <el-button type="primary" size="mini" @click="batchScoreSubmit('score_score', $event)">确定</el-button>
                                    </div>
                                    <i class="el-icon-edit-outline" style="color: #0442e0; font-size: 1.1em; cursor: pointer;" slot="reference">批量</i>
                                </el-popover>
                            </th>
                            <th style="width: 12%;">
                                <div id="th_score_price"><i class="el-icon-info"></i>兑换价格</div>
                                <el-popover placement="top" popper-class="batch_score_popover" width="160" trigger="click" title="批量设置兑换价格" v-model="batch_score_price_visible">
                                    <el-input-number value="0" name="batch_score_price" :precision="2" size="mini" controls-position="right" :min="0" style="max-width: 130px"></el-input-number>
                                    <div style="text-align: right; margin: 10px 0 0 0;">
                                        <el-button size="mini" type="text" @click="batch_score_price_visible = false">取消</el-button>
                                        <el-button type="primary" size="mini" @click="batchScoreSubmit('score_price', $event)">确定</el-button>
                                    </div>
                                    <i class="el-icon-edit-outline" style="color: #0442e0; font-size: 1.1em; cursor: pointer;" slot="reference">批量</i>
                                </el-popover>
                            </th>
                            <th style="width: 8%;"><div>操作</div></th>
                        </tr>
                        </thead>
                        <tbody>
                        <template v-for="(sku,index) in sku_info">
                            <tr :class="('undefined' !== typeof sku.data_key && (skuData[sku.data_key].score_option == 'add' || skuData[sku.data_key].score_option == 'edit'))?'datagrid-body-row datagrid-body-row-selected':'datagrid-body-row'">
                                <td>
                                    <div class="sku_infos_box">
                                        <template v-for="(info, i) in sku.goods_sku">
                                            <p>{{info.name}}:<span>{{info.text}}</span></p>
                                        </template>
                                    </div>
                                </td>
                                <td>
                                    <div>{{sku.sku_goods_stock}}</div>
                                </td>
                                <td>
                                    <div>{{sku.sku_price?sku.sku_price:0}}</div>
                                </td>
<!--                                <td>-->
<!--                                    <div :style="{'color': (sku.score_status == 'up' ? '#0eb913': (sku.score_status == 'down' ?'#d33632':'#333333'))}">{{sku.score_status_text}}</div>-->
<!--                                </td>-->
                                <td>
                                    <div v-if="sku.score_in">{{sku.score_sales}}</div>
                                    <div v-else>--</div>
                                </td>
                                <td>
                                    <div v-if="'undefined' !== typeof sku.data_key">
                                        <span v-if="skuData[sku.data_key].score_option == 'del'||skuData[sku.data_key].score_option == 'drop'">--</span>
                                        <el-input-number name="score_stock" v-model="skuData[sku.data_key].score_stock" :min="0" size="mini" controls-position="right" style="max-width: 90px;" v-else></el-input-number>
                                    </div>
                                    <div v-else>--</div>
                                </td>
                                <td>
                                    <div v-if="'undefined' !== typeof sku.data_key">
                                        <span v-if="skuData[sku.data_key].score_option == 'del'||skuData[sku.data_key].score_option == 'drop'">--</span>
                                        <el-input-number name="score_score" v-model="skuData[sku.data_key].score_score" :min="0" size="mini" controls-position="right" style="max-width: 90px;" v-else></el-input-number>
                                    </div>
                                    <div v-else>--</div>
                                </td>
                                <td>
                                    <div v-if="'undefined' !== typeof sku.data_key">
                                        <span v-if="skuData[sku.data_key].score_option == 'del' || skuData[sku.data_key].score_option == 'drop'">--</span>
                                        <el-input-number name="score_price" v-model="skuData[sku.data_key].score_price" :precision="2" :min="0" size="mini" controls-position="right" style="max-width: 110px;" v-else></el-input-number>
                                    </div>
                                    <div v-else>--</div>
                                </td>
                                <td>
                                    <el-button type="success" icon="el-icon-circle-plus-outline" size="mini" @click="joinScore(1,index, $event)"  v-if="'undefined' === typeof sku.data_key || ('undefined' !== typeof sku.data_key && (skuData[sku.data_key].score_option == 'drop' || skuData[sku.data_key].score_option == 'del'))">参加</el-button>
                                    <el-button type="danger" icon="el-icon-remove-outline" size="mini" @click="joinScore(0,index, $event)" v-else>取消</el-button>
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </div>
            </el-main>
        </el-container>
    </el-container>
</form>

<script>
    var scoreshopEditVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            is_edit: '<?php echo addslashes($is_edit);?>',
            goods_info: JSON.parse('<?php echo addslashes($goods_info);?>'),
            skuData: [],
            sku_info: JSON.parse('<?php echo addslashes($sku_info);?>'),
            batch_score_stock_visible: false,
            batch_score_score_visible: false,
            batch_score_price_visible: false,
        },
        created: function () {
            for (let i =0; i < this.sku_info.length; i++){
                if(this.sku_info[i].score_in){
                    let newSkudata = {};
                    newSkudata.score_in = this.sku_info[i].score_in;
                    newSkudata.score_id = this.sku_info[i].score_id;
                    newSkudata.score_stock = this.sku_info[i].score_stock;
                    newSkudata.score_price = this.sku_info[i].score_price;
                    newSkudata.score_score = this.sku_info[i].score_score;
                    newSkudata.score_option = this.sku_info[i].score_option;
                    newSkudata.sku_goods_price_id = this.sku_info[i].sku_goods_price_id;
                    newSkudata.sku_goods_id = this.sku_info[i].sku_goods_id;
                    let $data_key = this.skuData.push(newSkudata);
                    this.sku_info[i].data_key = $data_key - 1;
                }
            }
        },
        methods: {
            updateVMData() {
                this.$forceUpdate();
            },
            submit: function(data){
                if(this.skuData.length){
                    $.post('/admin/scoreshop/save', {params: this.skuData}, function(data){
                        if(data.ret===0){
                            $("#scoreshopManagedlg").dialog('close');
                            $.messager.show({
                                title: '提示',
                                msg: data.msg,
                                timeout: 3000,
                                showType: 'slide'
                            });
                            scoreshopManageVm.init();
                        }else{
                            $.messager.alert('提示',data.msg,'warning');
                        }
                    }, 'json');
                }
            },
            joinScore:function (opt, key, ele){
                let sku_row = this.sku_info[key];
                if(opt === 1){
                    if('undefined' === typeof sku_row.data_key){
                        let newSkudata = {};
                        newSkudata.score_in = 0;
                        newSkudata.score_id = sku_row.score_id;
                        newSkudata.score_stock = 0;
                        newSkudata.score_price = 0;
                        newSkudata.score_score = 0;
                        newSkudata.score_option = 'add';
                        newSkudata.sku_goods_price_id = sku_row.sku_goods_price_id;
                        newSkudata.sku_goods_id = sku_row.sku_goods_id;
                        let $data_key = this.skuData.push(newSkudata);
                        sku_row.data_key = $data_key - 1;
                    }else{
                        if(this.skuData[sku_row.data_key].score_in == 1){
                            this.skuData[sku_row.data_key].score_option = 'edit';
                        }else{
                            this.skuData[sku_row.data_key].score_option = 'add';
                        }
                    }
                    $(ele.target).closest('tr').addClass('datagrid-body-row-selected');
                }else{
                    if(this.skuData[sku_row.data_key].score_in == 1){
                        this.skuData[sku_row.data_key].score_option = 'del';
                    }else{
                        this.skuData[sku_row.data_key].score_option = 'drop';
                    }
                    $(ele.target).closest('tr').removeClass('datagrid-body-row-selected');
                }
                this.updateVMData();
            },
            batchScoreSubmit(key, ele){
                if('undefined' !== key){
                    let inputValue = $(ele.target).closest('.batch_score_popover').find('input').val();
                    if(inputValue === ''){
                        $(ele.target).closest('.batch_score_popover').find('input').attr('placeholder', '没有填写值').focus();
                        return false;
                    }
                    let vue_key = 'batch_'+key+'_visible';
                    this[vue_key] = false;
                    if(this.skuData.length){
                        this.skuData.forEach(function (item){
                            if(item.score_option != 'del'){
                                item[key] = inputValue;
                            }
                        });
                    }
                }
            },
        }
    });
    $('#submitGoods').click(function(){
        if(scoreshopEditVm.skuData.length){
            scoreshopEditVm.submit();
        }else{
            $.messager.alert('提示', '没有选择商品规格','warning');
        }
    })
    $('#th_score_sales').tooltip({
        position: 'top',
        content: '当前商品在积分商城的销量',
    });
    $('#th_score_stock').tooltip({
        position: 'top',
        content: '当前商品在积分商城的库存',
    });
    $('#th_score_score').tooltip({
        position: 'top',
        content: '兑换当前商品需要的积分',
    });
    $('#th_score_price').tooltip({
        position: 'top',
        content: '兑换当前商品需要的价格',
    });
</script>
<style>
    .el-header {
        background-color: #2c3e50;
        color: #FFFFFF;
        text-align: left;
        line-height: 40px;
        text-indent: 2em;
        font-size: 1.2em;
        font-weight: bold;
    }

    .goodsinfo_wenzi span{
        color: #ee650c;
    }

    .datagrid-body-row-selected, .datagrid-body-row-selected div{
        background: #acfdc9 !important;
        color: rgb(213, 18, 18) !important;
    }

    .datagrid-body-row:nth-child(2n){
        background: #f1f1f1;
    }

    .datagrid-body-row td{
        padding: 3px 0;
    }

    .select-goods-info{
        display: flex;
        padding: 5px 20px;
        background: #dedede;
    }

    .select-goods-info img{
        width: 50px;
        height: 50px;
        border-radius: 10px;
    }

    .select-goods-info p{
        width: calc(100% - 100px);
        padding-left: 10px;
        font-size: 1.1em;
        font-weight: bold;
        line-height: 25px;
    }

    .datagrid-htable th i.el-icon-info{
        color: #015feb;
    }

    .sku_infos_box{
        display: flex;
        padding: 2px 0;
        justify-items: center;
        justify-content: center;
    }

    .sku_infos_box p{
        font-size: .9em;
        border-left: 1px solid #1a83e8;
        text-align: center;
        padding: 0 5px;
    }

    .sku_infos_box p:first-child{
        border-left: none;
    }

    .sku_infos_box p span{
        color: #67504b;
    }

    .el-input-number.is-controls-right .el-input__inner{
        padding-left: 5px !important;
        padding-right: 35px !important;
    }

    .batch_score_popover{
        z-index: 100000 !important;
    }

    .batch_score_popover .el-popover__title{
        font-size: 14px;
        font-weight: bold;
    }
</style>